Using Graphics and Color

Graphics formats

There are two types of graphics formats used in a web page and supported by most browsers: GIF and JPG. Programs like Photoshop can create these graphics. The Microsoft Imager application that comes with MS Office can convert from other formats such as BMP into GIF or JPG format.

One big advantage of the GIF format is that it supports transparent background colors. One of the colors in the image is designated a transparent color, and any part of the image in that color will actually show the background color. You can create these with Photoshop using the GIF89A export filter. Shareware programs like Paint Shop Pro can also do the job.

Layout with graphics

on't think it's impossible to make nice-looking layouts with HTML. It's just harder than it should be. You can use graphics for effects like the drop cap in this paragraph, and have the text wrap around the graphic. Of course, that means you need to have a separate graphic for every letter of the alphabet--and every style of letter--that you want to use. Ick.

Graphics can be put on either margin, and positioned in a location that is not vertically aligned with the first line of the paragraph. A graphic is always a rectangular area, so you can't get fancy and wrap text around a circular region. However, you can do some pretty creative things. For example, you can put a graphic right into the text like this , but it works best for graphics that aren't any larger than the text. Otherwise, the line spacing will be affected. And in case you're wondering, no you can't put a graphic into the center of a paragraph or between two columns and have the text wrap around it.

At the end of each of the two paragraphs above, you'll see the HTML tag <BR CLEAR=BOTH> at the end of the paragraph. This tag says that if the text hasn't yet cleared (wrapped around) the graphic, it should clear the graphic and start the next text below the graphic. Don't just look at the text in the browser and say "Oh, I can see I don't need that so I'll leave it out." Remember, this ain't no WYSIWYG here. Someone else using a different browser or font size may not have cleared their graphic yet and may need that.

If you have a large graphic that you'd like to put on the page, you have to overcome two problems. First, a large graphic may not fit in the browser window, which may spoil the effect. Second, a large graphic can take a long time to load. Here's one possible way to solve the problem with a thumbnail graphic and caption; try the link as well:

Figure 1: (36KB)
Dial-Up Networking Setup

Growing graphics

Here's an inexpensive way to get a big graphic that doesn't take a long time to download. Just specify a HEIGHT and WIDTH to resize a smaller graphic. Don't take this too far, though. Here's a graphic actual size, then blown up to double and quadruple sizes:

Wide open spacers

Let's say you want to add a bit more space between some text or graphics you've put on the page. If we were talking WYSIWYG here, you'd just put a few more spaces, or maybe a tab, between those items. But HTML doesn't work that way. The browser collapses multiple spaces, tabs, and even blank lines into a single space.

OK, so what now? One way that works is to use a "non-break space" that you specify as   in your HTML wherever you need the extra space. If you need 20 spaces, you put 20 of them in a row. That can get pretty tedious, and it also doesn't give you very good control over the amount of space; you either have a whole space-wide hole or you don't.

So on to plan B: the single-pixel transparent GIF. You read about transparent GIFs above. (What? I'll wait here while you go back and find it.) What you do is have this teeny-tiny GIF file that is completely transparent, so your background just shines through. Then you size that GIF to whatever amount you want using the HEIGHT and WIDTH parameters in the IMG tag. Here's an example:

The space

In this place

Is mainly behind my face.

Cool, huh? Maybe this HTML stuff isn't so bad after all.

Asking for colors--and getting them

Many HTML tags let you specify a color for various aspects of a presentation. The way you specify the color is with hexidecimal RGB (red,green,blue) numbers, prefixed with a pound-sign. For example, if you want bright green text that says "HELLO!" then you'd use
<FONT COLOR=#00FF00>HELLO!</FONT>
and you should get: HELLO!

But don't push your luck. Remember that many people will be using 256-color graphics boards. If you specify a color like #C14328 and expect it to be a different color than #C04020 then you may be unpleasantly surprised. The browser may also dither the colors to get something close to your requested color, and that looks pretty ugly.

You can certainly experiment with the numbers to find a color you like, but that can be pretty tedious work. There's already plenty of tedious work in HTML, so instead I suggest that you use HCR32.EXE, a really convenient freeware program that will let you create the color and read off the magic RGB hex number that you need.

HCR32.EXE is available on this CD-ROM as \HTML\PUBLISH\HCR32.EXE. Reqiures VBRUN40032.DLL, available in the root directory of this CD-ROM; please read VB40032.TXT. This program runs under Windows 95, not Windows 3.1.

NOTE: If you look at some pages you may see HTML tags that use friendly words like "WHITE" or "YELLOW" to specify colors. These are not always supported by all browsers, although Netscape 2.0 and Internet Explorer 2.0 already support some of these color names. It's safest to use the hex numbers, as ugly as they are.

Background colors and graphics

By default, most browsers use an ugly gray background if you don't tell it otherwise. Pulleeze, tell it otherwise. If you want just a uniformly-colored background, you can specify it in the BODY tag that comes near the top of each HTML file. Just add the keyword BGCOLOR to the body tag like so:
<BODY BGCOLOR=#FFFFFF>
Where the colors are those wonderful RGB hex numbers described in the previous section. The value above will give you a bright white background.

You can also specify a bitmap that will be used as the background. We use this on the WinMag Web site to create a subtle textured-paper look to the screen. Some sites use a bitmap to display a "watermark" behind the text. Whatever you use, it should be subtle enough so that it contrasts with--and doesn't distract from--the text on top of it. To find out how this is done, take a look at the BACKGROUND option of the BODY tag, or just look at the HTML for a page with a background bitmap!

[Go back to Contents page]